<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<!-- JavaScript：核心语法+DOM(针对页面操作)+BOM(针对浏览器)
		        学习主体：针对页面操作比较多---DOM操作
				JQuery操作DOM：理解：JQ框架改变页面内容效果
				js基础就可以直接学习，了解函数使用
				基础函数----事件源之后出现，事件源语法糖中
				       1.html()--增加一个元素，覆盖原有html
					   2.val()--针对input元素，修改文本框内容
					   3.text()--生成一个文本内容
		 -->
		 <script src="js/jquery-1.11.1.js"></script>
		 <style>
			div{
				width: 200px;
				height: 200px;
				background: #000000;
			}
		 </style>
	</head>
	<body>
		<!-- 实现：鼠标点击按钮，改变产生一行文本 -->
		<button>按钮</button>
		<p class="lorem">Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique voluptas ex culpa mollitia id impedit consectetur cum minima, eaque minus commodi facere odit obcaecati ipsum adipisci eligendi, ducimus ea deleniti.</p>
		
		<div></div>
		<p class="color">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque vitae quibusdam quas magni, beatae placeat aliquam modi ipsam voluptatum. Placeat fugiat delectus repellat temporibus suscipit magni excepturi ullam animi. Sapiente?</p>
		
		<input type="button" value="按钮2" />
		<input type="text" />
		
		<script>
			$("button").click(function(){
				/* JQ操作DOM--html()函数使用 */
				$(".lorem").html("<h1>JQ操作DOM</h1>");
			});
			/* 练习1.div 200*200 背景颜色black 鼠标滑过 下方文本内容修改为自定颜色<h3> */
			$("div").mouseenter(function(){
				$(".color").html("<h3>修改为自定颜色</h3>");
			});
			/* 练习2.按钮 文本框 点击按钮 文本框增加一行文本 */
			$("input[type='button']").click(function(){
				$("input[type='text']").val("文本框内容修改");
			});
			/* 利用JQuery操作DOM（页面效果）---元素内容操作 3个
			                                 属性操作 4个
											 样式类名操作 4个
											 元素样式操作 5个
											 css()
											 语法：css("css属性","css属性值")
											 attr().addClass()
											 插入和删除操作 7个
											 元素遍历操作 6个
											 JQ动画操作 7个
			 */
		</script>
	</body>
</html>